<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写与核对订单</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/order.ordersubmit.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="../js/vue.min.js"></script>
</head>
<body style="position: static">
<div id="app" class="bgGray">
    <div data-v-95ac8d30="" class="header3">
        <div data-v-95ac8d30="" class="layout clear" id="header">
            <div data-v-95ac8d30="" class="left logo">
                <a data-v-95ac8d30="" href="index.html">
                    <img data-v-95ac8d30=""
                         src="">
                </a>
            </div>
            <div data-v-95ac8d30="" class="header3Nav right">|<a data-v-95ac8d30=""
                                                                 href="../mymain/mymain.html">我的订单</a>|<a
                    data-v-95ac8d30="" href="helpCenter.html">帮助中心</a>|<a data-v-95ac8d30=""
                                                                          href="../pagehome/login.html" onclick="localStorage.clear()">退出</a></div>
            <div data-v-95ac8d30="" class="header3User right"><i data-v-95ac8d30=""
                                                                 class="iconfont icon-phone"></i><span
                    data-v-95ac8d30="" class="sp1">400-919-8000</span><span data-v-95ac8d30=""
                                                                            class="sp2">欢迎您，{{ user.tel }}</span><span
                    data-v-95ac8d30="" class="sp3"></span></div>
        </div>
    </div>


        <div class="checkOrderTit">
            <div class="layout">
                <div class="checkOrderTitCom">
                    <div class="checkOrderTitComT">
                        <div class="td1 bgRed"></div>
                        <div class="td2 bgRed">1</div>
                        <div class="td3 bgRed"></div>
                        <div class="td2 bgRed">2</div>
                        <div class="td3 bgGray1"></div>
                        <div class="td2 bgGray1">3</div>
                        <div class="td1 bgGray1"></div>
                    </div>
                    <div class="checkOrderTitComB">
                        <div class="bd1 colorRed">选择车辆</div>
                        <div class="bd2 colorRed">填写和核对订单</div>
                        <div class="bd1 colorGray">提交成功</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="orderMsg clear">

            <div class="orderMsgs">
            <div class="orderMsgL left">
                <img :src="infos.picture">
                <p>{{infos.type}}|{{infos.sitnum}}座</p>

            </div>
            <div class="orderMsgR left">
                <div class="carTitle">
                    <span class="carTitle1 left">{{infos.name}}</span>
                </div>

                <div class="selCarMsg" id="selCarMsg1">
                    <div class="selCarMsgCom">
                        <div class="MsgTit">取车</div>
                        <div class="Msg">取车地址：{{getcitys}}</div>
                    </div>

                    <div class="selCarMsgCom">
                        <div class="MsgTit">还车</div>
                        <div class="Msg">还车地址：{{backcitys}}</div>
                    </div>
                </div>
            </div>
                <div class="costCom right">
                    <h3>费用明细</h3>
                    <div class="item">
                        <span class="left" >基本租金</span>
                        <span class="right">{{infos.price}}元</span>
                    </div>
                    <div class="item">
                        <span class="left" >手续费（35元/单）</span>
                        <span class="right">35元</span>
                    </div>
                    <div class="item">
                        <span class="left" >基本保障服务</span>
                        <span class="right">50元</span>
                    </div>
                    <div class="payMony">
                    <label class="right">应付金额&nbsp;
                    <span id="total">{{current()}}</span></label>
                    </div>
                    <button class="buttons right" id="butt" onclick="submitorder()">
                        提交订单
                    </button>





                </div>




        </div>

        </div>
    </div>


    <script>
        var mv1 = new Vue({
            el:'.orderMsgs',
            data:{
                infos:[],
                getcitys : '',
                backcitys: ''
            },

            methods:{
                current:function (){
                    var total = 0;
                    var money = 85;
                    total = this.infos.price + money;
                    return total;
        }
            }
        });



    </script>



    <script type="text/javascript">

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
           // alert(query);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
        /*取车地址*/
        $(function(){
            //var getid = window.location.search;

           var getid=getQueryVariable("getid");
            //alert(getid)
            $.ajax({
                type:"get",
                url:"/getcityByGetid?getid="+getid,
                dataType:"json",
                success:function(city){
                    //alert(city);
                    mv1.getcitys = city.name;
                    //alert( vm2.getcitys);
                    console.log( mv1.getcitys);
                    /*if(data.statusCode==200) {
                        //var infos = data.info;

                        //vm.backcitys = infos.backCity;
                    }*/
                },
                error : function(){
                    alert("ajax加载失败");
                }

            })
        })
        /*还车地址*/
        $(function(){
            //var getid = window.location.search;
            var backid=getQueryVariable("backid");
            //alert(backid)
            $.ajax({
                type:"get",
                url:"/getcityByGetid?getid="+backid,
                dataType:"json",
                success:function(city){
                    mv1.backcitys = city.name;
                    //alert(vm2.backcitys);
                    console.log(mv1.backcitys);
                   /* if(data.statusCode==200) {
                        //var infos = data.data;
                        //vm.getcitys = infos.getCity;
                        vm.backcitys = data.name;
                        alert(vm.backcitys );
                    }*/
                },
                error : function(){
                    alert("ajax加载失败");
                }

            })
        })
        /*获取车的id*/
        $(function(){
            //var getid = window.location.search;
            var cid=getQueryVariable("cid");
            //alert(cid);
            $.ajax({
                type:"get",
                url:"/car/findCarById?id="+cid,
                dataType:"json",
                success:function(data){
                    mv1.infos = data.data;
                    console.log( mv1.infos);
                   /* if(data.code==1) {
                        vm.infos = data.id;
                    }*/
                },
                error : function(){
                    alert("ajax加载失败");
                }

            })
        })
    </script>



    <!--预定车辆-->
    <script type="text/javascript">
        function submitorder() {
            var id=window.location.search;
            //alert(id);
            var total = $("#total").html();
            $.ajax({
                type:"get",
                url:"/order/addOrder"+id+"&oprice="+ total,
                dataType:"json",
                success:function(res){
                        alert(res.msg);
                        if (res.msg == '请您登录'){
                            logout();
                        }else {
                            window.location.href="../mymain/mymain.html";
                        }

                },
                error : function(){
                    alert("ajax加载失败");
                }

            });
        }

        function logout() {
            $.ajax({
                type: "get",
                url: "/logout",
                dataType: "json",
                success: function (data) {
                    localStorage.clear();
                    window.location.href = "/pagehome/login.html";
                },
                error: function () {
                    alert("退出登录失败");
                }
            })
        }

    </script>

<script>
    var he = new Vue({
        el: "#header",
        data: {
            tel: ""
        }
    })

    $(function () {
        /*
        * 获取localStorage中的用户信息
        * */
        var user = JSON.parse(localStorage.getItem("user"));
        he.tel = user.tel;
        he.email = user.email;
        he.tel = user.tel;
    })
</script>




</body>
</html>